
<script setup lang="ts">
import router from '@/router';
import { popWebViewController } from "@/utils/bridge";
import useAppStore from '@/store/modules/app';
import { jsonParseItem, isWeixin } from '@/utils';

const appStore = useAppStore();
const statusBarHeight = jsonParseItem('statusBarHeight');
if (statusBarHeight) {
  appStore.statusBarHeight = statusBarHeight;
}
const getVal = (val: string | number) => typeof val === 'number' ? val + 'px' : val;

/**
 * @description 导航栏组件，主要用于头部导航
 * @property {String} title 标题文字
 * @property {String} border 导航栏底部边框
 * @property {Boolean} closePage H5关闭页面,关掉webview.
 * @property {String} leftText 左侧按钮文本
 * @property {String} rightText 右侧按钮文本
 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 * @property {Boolean} leftEvent 是否默认点击事件
 * @property {String} color 图标和文字颜色
 * @property {String} background 导航栏背景颜色
 * @property {String} position 是否需要固定在顶部
 * @event {Function} clickLeft 左侧按钮点击时触发
 * @event {Function} clickRight 右侧按钮点击时触发
 * @event {Function} clickTitle 中间标题点击时触发
 */
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	border: {
		type: Boolean,
		default: false
	},
	closePage: {
		type: Boolean,
		default: false
	},
	leftText: {
		type: String,
		default: ''
	},
	rightText: {
		type: String,
		default: ''
	},
	leftIcon: {
		type: String,
		default: ''
	},
	showBack: {
		type: Boolean,
		default: true
	},
	rightIcon: {
		type: String,
		default: ''
	},
	leftEvent: {
		type: Boolean,
		default: true
	},
	color: {
		type: String,
		default: "#333"
	},
	opacity: {
		type: Number,
		default: 1
	},
	background: {
		type: String,
		default: '#fff'
	},
	leftWidth: {
		type: Number,
		default: 60
	},
	rightWidth: {
		type: Number,
		default: 60
	},
	position: {
		type: String,
		default: 'fixed'
	},
	clickLeft: {
		type: Function
	},
	clickRight: {
		type: Function
	},
	clickTitle: {
		type: Function
	}
});

const emit = defineEmits(['clickLeft', 'clickRight', 'clickTitle']);

const leftIconWidth = computed(() => {
	return getVal(props.leftWidth);
})

function onClickLeft() {
	emit("clickLeft");
  if (props.closePage) {
		if (isWeixin) {
			try {
				wx.miniProgram.navigateBack();
			} catch(e) {
				popWebViewController();
				router.go(-1);
			}
		} else {
			popWebViewController();
			router.go(-1);
		}
  } else if (props.leftEvent) {
    router.go(-1);
		// history.back();
  }
}
function onClickRight() {
	emit("clickRight");
}
function onClickTitle() {
	emit("clickTitle");
}
</script>

<template>
	<div class="page-head" :style="{ opacity: props.opacity }">
		<div class="navbar__content" :style="{ 'background': props.background, position: props.position }">
			<div :style="{ height: appStore.statusBarHeight + 'px' }" class="status-bar"></div>
			<div :style="{ color: props.color }" :class="['navbar__header', { 'hairline-bottom' : props.border }]">
        <div  class="navbar__header-btns navbar__header-btns-left flex align-center space-between">
          <div @click="onClickLeft"
               :style="{width: leftIconWidth}">
            <slot name="left">
              <img v-if="props.leftIcon" class="back" :src="props.leftIcon" />
              <img v-if="props.showBack" class="back" src="@/assets/navbar-back2x.png" />
              <div class="page-head-btn-text" v-if="props.leftText">{{ props.leftText }}</div>
            </slot>
          </div>
          <slot name="leftIcon">
          </slot>
        </div>

				<div class="navbar__header-container" @click="onClickTitle">
					<slot>
						<div class="navbar__header-container-inner ellipsis" v-if="props.title">{{ props.title }}</div>
					</slot>
				</div>
				<div @click="onClickRight" class="navbar__header-btns navbar__header-btns-right">
					<slot name="right">
						<div v-if="props.rightIcon">
							<img class="right-icon" :src="props.rightIcon" />
						</div>
						<div class="page-head-btn-text nav-bar-right-text" v-if="props.rightText">{{ props.rightText }}</div>
					</slot>
				</div>
			</div>
		</div>
		<div>
			<div :style="{ height: appStore.statusBarHeight + 'px' }" class="status-bar"></div>
			<div class="navbar__placeholder-div"></div>
		</div>
	</div>
</template>

<style lang="scss">
.page-head {
	position: sticky;
	z-index: 90;
	.navbar__content {
		z-index: 91;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		border-bottom-color: #333;
    background-size: 100% 100% !important;
		.status-bar {
			height: 20px;
		}

		.right-icon {
			width: 24px;
			height: 24px;
		}
		.page-head-btn-text {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
      font-weight: 600;
      font-size: 18px;
      color: #252525;
      line-height: 18px;
      text-align: right;
      font-style: normal;
		}
    .nav-bar-right-text {
      font-weight: 500;
      font-size: 15px;
      color: #252525;
      line-height: 15px;
      text-align: center;
      font-style: normal;
		}
		.navbar__header {
			height: 44px;
			font-size: 12px;
			.back {
				width: 24px;
				height: 24px;
			}
		}
    .hairline-bottom {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        border-bottom: 1px solid #ededed;
        transform: scaleY(0.5);
      }
    }

		.navbar__header-btns {
			overflow: hidden;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			min-width: 60px;
			align-items: center;
			cursor: pointer;
			position: absolute;
			bottom: 0;
			height: 44px;
			z-index: 89;
      padding: 0 10px 0 0;
		}

		.navbar__header-btns-left {
			justify-content: flex-start;
			align-items: center;
			left: 0;
			padding-left: 12px;
		}

		.navbar__header-btns-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			right: 0;
			padding-right: 12px;
		}

		.navbar__header-container {
			padding: 0 100px;
			overflow: hidden;
			height: 44px;
		}

		.navbar__header-container-inner {
			overflow: hidden;
			font-weight: 600;
			font-size: 16px;
			color: #252525;
			line-height: 44px;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
	.navbar__placeholder-div {
		height: 44px;
	}
}
</style>
